State and Props (1/6)
What is the state and props? How are they different?
State of a component is an object that holds some information that may change over the lifetime of the component. The state is reactive data specific to an component. We should always try to make our state as simple as possible and minimize the number of stateful components.
Props (short for properties) define the Component's configuration.
- Props are inputs to a React component.
- Props are properties that are passed into a child component from its parent, and are read-only/ immutable.
- They are single values or objects containing a set of values that are passed to React Components on creation using a naming convention similar to HTML-tag attributes.
- Props do not have to just be data - callback functions may be passed in as props.
- They are used to control data used by a child component from parent in the component tree.
Differences:
- Props are received from above, from parent component while state is managed by component itself
- Props can not be updated by the component consuming it they are immutable while state can be updated by the component consuming it